// 所有react项目都要有
import react, { Component, Fragment } from 'react';
// 虚拟DOM、JSX解析器
import reactDom from 'react-dom';

import propTypes from 'prop-types';

// 引入样式表
import './index.css';

// 组件的运用：组合、嵌套。
class App extends Component {
  render() {
    return (
      <>
        <h1>计数器</h1>
        <Count />
      </>
    );
  }
}

// 组件存储数据的方式两种：
// 属性props：父组件传给子组件的，对组件自己来说是外部的数据，不能修改。
// 状态state：是组件自己的状态，自己的数据，可以修改。

// 编写一个记数器，讲解state（状态）。
class Count extends Component {
  constructor(props) {
    super(props); // 处理属性，这是一个默认方法。

    // 定义状态
    this.state = {
      count: 0
    };
    this.sub = this.sub.bind(this); // 方法4：绑定事件处理程序的this
  }

  // 方法2：推荐用
  add = () => {
    console.log(this);
    this.setState({
      count: this.state.count + 1
    });
  };

  /* sub = () => {
    this.setState({
      count: this.state.count - 1
    });
  };*/

  // 方法3：类方法，需要绑定this
  sub() {
    console.log(this); // this丢失了，变成了undefined
    this.setState({
      count: this.state.count - 1
    });
  }

  render() {
    return (
      <>
        <p>记数：{this.state.count}</p>
        <p>
          {/* 方法2：用箭头方法绑定类方法 */}
          <button onClick={this.add}>+</button>
          <button onClick={this.sub}>-</button>

          {/* 方法1： <button
            onClick={() => {
              this.setState({
                count: this.state.count - 1
              });
            }}
          ></button> */}
        </p>
      </>
    );
  }
}

reactDom.render(<App />, document.getElementById('root'));
